<template>
  <div class="app-container">
    <div class="management">
      <div class="management-left">
        <!-- {{data.menusdata}} -->
        <elTree
          v-if="menudata.length > 0"
          ref="elTree"
          class="elbox"
          :menudata="menudata"
          :default-props="defaultProps"
          :checked-keys="defaultCheckedKeys"
          @getCode="getTreeCode"
          @treeChange="treeChange"
        />
      </div>
      <div class="management-right">
        {{ funLeftData.children}}
        <el-row>
          <el-col>
            <el-button type="success" @click="andd()">新增</el-button>
          </el-col>
          <el-col class="manage-index">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column label="NO" width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.indexId }}</span>
                </template>
              </el-table-column>
              <el-table-column label="名称" width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column label="资源路径" width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.lujing }}</span>
                </template>
              </el-table-column>
              <el-table-column label="权限标识" width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" width="180">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- <router-view />  -->
      </div>
      <el-dialog :visible.sync="dialogTreeVisible" width="35%">
        <el-form
          ref="ruleForm"
          :model="addmenu"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="addmenu.name" />
          </el-form-item>
          <el-form-item label="菜单链接" prop="url">
            <el-input v-model="addmenu.url" />
          </el-form-item>
          <el-form-item label="权限标识" prop="auth_code">
            <el-input v-model="addmenu.auth_code" />
          </el-form-item>
          <el-form-item label="菜单序号" prop="sort">
            <el-input v-model="addmenu.sort" />
          </el-form-item>
          <el-form-item label="菜单状态:" prop="status">
            <el-radio-group v-model="addmenu.status">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="0">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import elTree from "@/components/el-tree";
import { Menumanagement, menuAdd } from "@/api/user";
const menusdata = [];
export default {
  components: {
    elTree
  },
  data() {
    return {
      menudata: [],
      ruleForm: {
        name: "",
        sort: "",
        parent_id: "",
        url: "",
        auth_code: "",
        status: 1
      },
      radio: "1",
      dialogTreeVisible: false,
      defaultProps: {
        children: "",
        label: ""
      },
      lis:"",
      addmenu: {
        name: "",
        sort: "",
        parent_id:0,
        url: "",
        auth_code: "",
        status: 1
      },
      defaultCheckedKeys: [],
      tableData: [
        {
          date: "系统管理",
          indexId: "1",
          lujing: "http://localhost:8082/#/example/tree",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "系统工具",
          name: "王小虎",
          indexId: "2",
          lujing: "http://localhost:8082/#/example/tree",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "用户管理",
          indexId: "3",
          lujing: "http://localhost:8082/#/example/tree",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "我的通讯",
          name: "王小虎",
          indexId: "4",
          lujing: "http://localhost:8082/#/example/tree",
          address: "上海市普陀区金沙江路 1516 弄"
        },
        {
          date: "数据库管理",
          indexId: "5",
          name: "王小虎",
          lujing: "http://localhost:8082/#/example/tree",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      funLeftData: { value: 31, label: "系统管理" },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 100, message: "", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "请输入菜单链接", trigger: "blur" },
          { min: 1, max: 100, message: "", trigger: "blur" }
        ],
        PermissionID: [
          { required: true, message: "请输入权限标识  ", trigger: "blur" },
          { min: 1, max: 100, message: "", trigger: "blur" }
        ],
        serialnumber: [
          { required: true, message: "请输入菜单序号", trigger: "blur" },
          { min: 1, max: 100, message: "", trigger: "blur" }
        ]
      }
    };
  },

  created() {
    this.listdata();
  },
  mounted() {},
  methods: {
    treeChange(data) {
      console.log(data);
      this.funLeftData = data;
      console.log(this.funLeftData.children);
      console.log(this.funLeftData);
      var dataid = data.value;
      console.log(dataid)
      this.addmenu.parent_id=dataid;
      console.log(this.addmenu.parent_id);
    },
    /** 递归转换 Tree 数据 */
    getTree(tree) {
      return tree.map(({ children, ...item }) => ({
        ...item,
        label: item.name,
        children: children && children.length > 0 ? this.getTree(children) : []
      }));
    },
    listdata() {
      Menumanagement()
        .then(response => {
          this.menudata = [
            ...this.getTree(response.data)
          ];
          if (this.menudata[0]) {
            const { label, children, nodeKey } = this.menudata[0].label;
            this.defaultProps = {
              label,
              children
            };
            this.defaultCheckedKeys = [nodeKey];
          }
        })
        .catch(error => {
          console.log(error);
          // reject(error)
        });
    },
    Menumanagements() {},
    andd() {
      // this.menudata.parent_id=
      this.dialogTreeVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          menuAdd(this.addmenu)
            .then(response => {
              console.log(response);
              // this.Permissionlist.splice(index, 1, this.usernames); 
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "新增成功"
              });
              this.dialogTreeVisible = false;
              this.userList();
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogTreeVisible = false;
    },
    getTreeCode(data) {
      console.log(data, "---->>>>");
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
  .management {
    height: 100%;
    display: flex;
    // margin: 20px;
    background-color: #fff;
    .management-left {
      width: 350px;
      background-color: #f2f2f2;
      // background-color:#333;
    }
    .management-right {
      padding: 16px;
      width: calc(100% - 350px);
    }
    .manage-index {
      margin-top: 12px;
    }
    .elbox {
      height: 100%;
    }
  }
}
::v-deep .el-tree {
  padding: 12px !important;
  height: 100% !important;
  width: 350px !important;
}
</style>

